// 入口函数
$(function () {
  if (!localStorage.getItem("token")) {
    layui.layer.msg("登录失败，token缺失", { icon: 5 }, function () {
      localStorage.removeItem("token");
      // 2. 强制跳转到登录页面
      window.parent.location.href = "/bigevent-end/login.html";
    });
  }
  //   alert("ok");
  // 获取所有分类友情链接列表 渲染到页面
  list();

  function list() {
    $.ajax({
      url: "/admin/links",
      method: "get",
      success: function (res) {
        console.log(res);
        if (res.status !== 0) {
          return layui.layer.msg(res.message, { icon: 5 });
        }
        // 渲染到页面（模板引擎）
        var htmlStr = template("tpl-list", res);
        // console.log(htmlStr);
        $("tbody").html(htmlStr);
      },
    });
  }

  //   添加分类
  var indexAdd = null;
  $("#add-link").on("click", function () {
    //   1-单击添加按钮，弹出一个模态框
    indexAdd = layui.layer.open({
      type: 1,
      title: "添加友情链接",
      area: ["550px", "450px"],
      content: $("#add-form-tpl").html(),
    });
    $("#urlIcon").on("click", function () {
      $("#linkFile").click();
    });
    $("#linkFile").on("change", function () {
      // 获取文件列表
      var files = $(this)[0].files;
      //   console.log(files[0]);
      if (files.length === 0) {
        return layui.layer.msg("请选择文件");
      }
      var img = URL.createObjectURL(files[0]);
      $("#preIcon").attr("src", img);
    });
  });
  //   2-完成分类的添加
  $("body").on("submit", "#add-form", function (e) {
    e.preventDefault();

    // -----请求参数必须使用 FormData
    // var data = $(this).serialize();
    var fd = new FormData($(this)[0]);
    fd.forEach(function (ele) {
      // console.log(ele);
    });
    // console.log(data);
    $.ajax({
      url: "/admin/links",
      method: "post",
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layui.layer.msg(res.message, { icon: 5 });
        }
        layui.layer.msg("添加链接成功", { icon: 6 });
        // 关闭模态框
        layui.layer.close(indexAdd);
        // 重新获取链接数据，重新渲染
        list();
      },
    });
  });

  //   3-编辑分类
  //   3.1 单击“编辑” 弹出模态框
  var indexEdit = null;
  $("tbody").on("click", ".edit", function () {
    // console.log("ok");
    indexEdit = layui.layer.open({
      type: 1,
      title: "编辑友情链接",
      area: ["550px", "450px"],
      content: $("#edit-form-tpl").html(),
    });
    var id = $(this).attr("data-id");
    load(id);

    $("#urlIcon").on("click", function () {
      $("#linkFile").click();
    });

    $("#linkFile").on("change", function () {
      // 获取文件列表
      var files = $(this)[0].files;
      //   console.log(files[0]);
      if (files.length === 0) {
        return layui.layer.msg("请选择文件");
      }
      var img = URL.createObjectURL(files[0]);
      $("#preIcon").attr("src", img);
    });
    $("#btnResets").on("click", function (e) {
      e.preventDefault();

      $("#linkFile").val("");
      load(id);
    });
    // 3.2 分类信息 渲染到表单中
    // 获取被编辑链接的id

    // 根据id获取被编辑链接的信息
  });

  function load(id) {
    $.ajax({
      url: "/admin/links/" + id,
      method: "get",
      //   data: { id: id },
      success: function (res) {
        // 给表单赋值
        layui.form.val("editForm", res.data);

        $("#edit-form").attr("data-id", res.data.id);
        $("#preIcon").prop("src", "http://localhost:8888/uploads/" + res.data.linkicon);
        // 点编辑点上传图片
      },
    });
  }

  //   3.3完成编辑链接功能
  $("body").on("submit", "#edit-form", function (e) {
    e.preventDefault();
    // var data = $(this).serialize();
    // console.log(data);
    var data = new FormData($(this)[0]);
    var file = $("#edit-form #linkFile")[0].files;

    if (file.length > 0) {
      data.append("linkicon", file[0]);
    }

    // else {
    //   var imgurl = $("#preIcon").prop("src").replace("http://localhost:8888/uploads/", "");
    //   data.append("linkicon", imgurl);
    // }
    let id = $(this).attr("data-id");
    data.forEach(function (ele) {
      // console.log(ele);
    });
    $.ajax({
      url: "/admin/links/" + id,
      method: "PUT",
      data: data,
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res);
        if (res.status !== 0) {
          return layui.layer.msg(res.message, { icon: 5 });
        }
        layui.layer.msg("更新链接列表成功", { icon: 6 });
        layui.layer.close(indexEdit);
        list();
      },
    });
  });

  //   4 删除分类
  $("body").on("click", ".delete", function () {
    //   获取被删除分类的id
    var id = $(this).attr("data-id");
    // console.log(id);
    // 询问用户是否确认删除
    layui.layer.confirm("您确定要删除此内容吗?", { icon: 3, title: "提示" }, function (index) {
      //do something
      // 调接口，删除分类
      $.ajax({
        url: "/admin/links/" + id,
        method: "DELETE",
        success: function (res) {
          //   console.log(res);
          if (res.status !== 0) {
            return layui.layer.msg(res.message, { icon: 5 });
          }
          layui.layer.msg("删除内容成功", { icon: 6 });
          //   重新获取重新渲染
          list();
        },
      });
      layer.close(index);
    });
  });

  // 重置功能
});
